import React, { Component } from 'react';
import { connect } from 'umi';
// import {DaylightPure} from '@/components/widgets/Daylight';
import DaylightPure from '@/components/widgets/Daylight/DaylightPure.tsx';
import { CloseSquareOutlined, CloseOutlined } from '@ant-design/icons';
import cls from 'classnames';
import styles from './index.less';

const DaylightPanel = ({ activeToolbar, onClose }) => {
  return (
    <div className={cls('base-panel', styles.daylightPanel)} style={{ width: 392 }}>
      <div className="base-panel-title">
        日光
        <span className="base-panel-title-btn">
          <CloseOutlined onClick={onClose} />
        </span>
      </div>

      <div className="base-panel-body" style={{ padding: '16px 24px', height: 360 }}>
        <DaylightPure
          activeToolbar={activeToolbar}
          btnPlay={<img src={require('../images/play.png')} alt="" />}
          btnPause={<img src={require('../images/pause.png')} alt="" />}
        />
      </div>
    </div>
  );
};

export default connect(({ maptoolbar }) => {
  return {
    activeToolbar: maptoolbar.activeToolbar,
  };
})(DaylightPanel);
